<template>
	<view class="banner">
		<swiper class="swiper-box" @change="change">
			<swiper-item v-for="(item, index) in props.slider" :key="index">
				<view class="swiper-item">
					<image :src="item" mode="widthFix" @click="previewImage"></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="w-box"></view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'

	const swiperDotIndex = ref(0)
	const props = defineProps({
		slider: {
			type: [Object, Array],
			default: () => {
				return []
			}
		}
	})
	const previewImage = () => {
		// 预览图片
		uni.previewImage({
			urls: props.slider,
			current: swiperDotIndex.value,
			// longPressActions: {
			// 	itemList: ['发送给朋友', '保存图片', '收藏'],
			// 	success: function (data) {
			// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 	},
			// 	fail: function (err) {
			// 		console.log(err.errMsg);
			// 	}
			// }
		});
	}


	const change = (e) => {
		swiperDotIndex.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.banner {
		position: relative;
		width: 100%;
		height: 515rpx;
	}

	.swiper-box {
		width: 100%;
		height: 515rpx;
	}

	.swiper-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		align-items: center;
		height: 515rpx;
		color: #fff;

		image {
			display: block;
			width: 100%;
			height: 515rpx;
		}
	}

	.w-box {
		width: 100%;
		height: 44rpx;
		position: absolute;
		bottom: -2rpx;
		left: 0;
		background: white;
		border-radius: 21rpx 21rpx 0rpx 0rpx;
	}
</style>